﻿<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page session="true" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=1600, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="shortcut icon" href="images/favicon.ico">
    <title>用户登录</title>
</head>
<body background="images/background2.jpg">
    <c:if test="${not empty sessionScope.user }">
        <c:redirect url="/user"></c:redirect>
    </c:if>
    <div class="nav clearfix">
        <a href="#"><img src="images/logo.png" width="130" height="48"></a>
        <div class="btn">
            <span id="reg">注册</span>
            <span id="back">返回首页</span>
        </div>
    </div>
    <div>
        <form action="userpage.html" class="login-form">
            <h1>用户登录</h1>
            <input type="text" name="username" id="username" placeholder="用户名" maxlength="16" />
            <input type="password" name="password" id="password" placeholder="密码" maxlength="16" />
            <a href="#">忘记密码?</a>
            <p></p>
            <input type="button" id="login-submit" value="登录" />
            <input type="button" id="goto-register" value="注册" />
        </form>
    </div>
</body>
<script src="js/jquery-3.6.0.min.js"></script>
<script>
    var register = document.getElementById("reg");
    register.onclick = function(){
        location.href = "/query/register";
    }
    var back = document.getElementById("back");
    back.onclick = function(){
        location.href = "/query/";
    }
    var goto_register = document.getElementById("goto-register");
    goto_register.onclick = function(){
        location.href = "/query/register";
    }
    $("#login-submit").click(function(){
        var username = $("#username").val();
        var password = $("#password").val();
        if(!username){
            $("form > p").text("用户名为空");
            $("form > p").show();
        }else if(!password){
            $("form > p").text("密码为空");
            $("form > p").show();
        }else{
            var param = {"userName":username,"password":password};
            $.post("/query/login",param,function(result){
                if(result=="true"){
                    window.location.href="/query/user";
                }else{
                    $("form > p").text("用户名或密码错误");
                    $("form > p").show();
                }
            })
        }
    })

</script>
</html>